import React, { Component } from 'react'

export default class App extends Component {
    state = {
        name: '张三'
    }
    render() {
        return (
            <div>
                <h1>{this.state.name}</h1>
                {/* 该输入框无法输入任何内容，因为该输入框是一个只读 */}
                {/* <input value={this.state.name} type="text" /> */}

                {/* 如果想要修改可以加一个 onChange,如果想设置默认值可以使用 defaultValue */}


                {/* 具有默认值的输入框 */}
                <input defaultValue={this.state.name} type="text" />


                {/* 可以跟数据绑定的输入框 */}
                {/* 带有 value 和 onChonge 的输入框被叫做受控的表单 */}
                <input value={this.state.name} onChange={(e) => {
                    this.setState({
                        name: e.target.value
                    })
                }} type="text" />




            </div>
        )
    }
}
